<template>
  <div class="debug-routes">
    <h2>路由调试信息</h2>
    
    <!-- 当前路由信息 -->
    <div class="current-route">
      <h3>当前路由</h3>
      <pre>{{ currentRouteInfo }}</pre>
    </div>
    
    <!-- 所有注册的路由 -->
    <div class="all-routes">
      <h3>所有注册路由</h3>
      <div class="routes-list">
        <div 
          v-for="route in allRoutes" 
          :key="route.path"
          :class="['route-item', { active: route.path === currentPath }]"
        >
          <div class="route-path">{{ route.path }}</div>
          <div class="route-name">{{ route.name || '未命名' }}</div>
          <div class="route-component">{{ route.component && route.component.name ? route.component.name : '未命名组件' }}</div>
          <div class="route-meta" v-if="route.meta">
            <small>需要认证: {{ route.meta.requiresAuth ? '是' : '否' }}</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DebugRoutes',
  data() {
    return {
      currentPath: '',
      currentRouteInfo: '',
      allRoutes: []
    };
  },
  methods: {
    // 更新当前路由信息
    updateCurrentRouteInfo() {
      const route = this.$route;
      this.currentPath = route.path;
      this.currentRouteInfo = JSON.stringify({
        path: route.path,
        name: route.name,
        params: route.params,
        query: route.query,
        meta: route.meta,
        fullPath: route.fullPath
      }, null, 2);
    },
    
    // 获取所有注册的路由
    getRegisteredRoutes() {
      // 递归获取所有路由
      const getAllRoutes = (routes) => {
        let allRoutes = [];
        
        routes.forEach(route => {
          allRoutes.push(route);
          if (route.children && route.children.length > 0) {
            allRoutes = [...allRoutes, ...getAllRoutes(route.children)];
          }
        });
        
        return allRoutes;
      };
      
      this.allRoutes = getAllRoutes(this.$router.options.routes);
    }
  },
  mounted() {
    // 组件挂载时初始化数据
    this.updateCurrentRouteInfo();
    this.getRegisteredRoutes();
    
    // 监听路由变化，更新当前路由信息
    this.$watch(
      () => this.$route,
      () => {
        this.updateCurrentRouteInfo();
      },
      { deep: true }
    );
  }
};
</script>

<style scoped>
.debug-routes {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px;
  font-family: 'Courier New', Courier, monospace;
}

.debug-routes h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.debug-routes h3 {
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

.current-route,
.all-routes {
  margin-bottom: 20px;
}

.current-route pre {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.4;
}

.routes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-item {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
  transition: all 0.3s ease;
}

.route-item:hover {
  border-color: #c20c0c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.route-item.active {
  border-color: #c20c0c;
  background-color: #fff0f0;
}

.route-path {
  font-weight: bold;
  color: #c20c0c;
  margin-bottom: 5px;
  font-size: 16px;
}

.route-name {
  color: #666;
  margin-bottom: 3px;
  font-size: 14px;
}

.route-component {
  color: #999;
  font-size: 13px;
  margin-bottom: 5px;
}

.route-meta small {
  color: #6c757d;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .debug-routes {
    margin: 10px;
    padding: 15px;
  }
  
  .debug-routes h2 {
    font-size: 18px;
  }
  
  .debug-routes h3 {
    font-size: 14px;
  }
  
  .route-path {
    font-size: 14px;
  }
}
</style>